<template>
	<h2>toRef()的使用</h2>
	<!-- <h3>name:{{ state.name }}</h3>
	<h3>age:{{ state.age }}</h3> -->

	<h3>name: {{ name }}</h3>
	<h3>age: {{ age }}</h3>
</template>

<script lang="ts">
import { defineComponent, reactive, toRefs } from "vue"

export default defineComponent({
	name: "App",
	setup(props) {
		const state = reactive({
			name: "自来也",
			age: 38
		})

		// 把一个响应式对象转换成普通对象，该普通对象的每个 property 都是一个 ref
		const state2 = toRefs(state)

		// 定时器，更新数据，如果数据变化了，界面也会随之变化，肯定是响应式数据
		setInterval(() => {
			state.name += "---"
			console.log("========")
		}, 2000)

		return {
			// state
			...state // 这种就不是响应式的数据了--->{name:'自来也',age: 37}
		}
	}
})
</script>

<style></style>

function setInterval(arg0: () => void, arg1: number) { throw new Error("Function not
implemented.") } function setInterval(arg0: () => void, arg1: number) { throw new
Error("Function not implemented.") } function setInterval(arg0: () => void, arg1: number)
{ throw new Error("Function not implemented.") }
